<template>
   <!-- 添加和修改设备对话框 -->
  <el-dialog
    :visible.sync="isVisible"
    :title="title"
    width="40%"
    @close="closeDialog">
     <div class="form">
       <el-form
          ref="deviceForm"
          :model="deviceForm"
          :rules="deviceForm_rules"
          label-width="110px"
          class="demo-ruleForm">
          <el-form-item prop="machine_no" label="设备号">
            <el-input type="text" v-model="deviceForm.machine_no" :disabled="inputShow" :validate-event="false"></el-input>
          </el-form-item>
          <el-form-item prop="name" label="设备名称">
            <el-input type="text" v-model="deviceForm.name" :validate-event="false"></el-input>
          </el-form-item>
          <el-form-item prop="station_id" label="工位">
            <el-select v-model="deviceForm.station_id" clearable placeholder="请选择">
              <el-option
                v-for="item in stationList"
                :key="item.station_id"
                :label="item.station_name"
                :value="item.station_id">
               </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="machine_kind" label="设备类型">
            <el-select  v-model="deviceForm.machine_kind">
              <el-option label="上料" value="上料"></el-option>
              <el-option label="堆叠" value="堆叠"></el-option>
              <el-option label="机器人" value="机器人"></el-option>
              <el-option label="气密" value="气密"></el-option>
              <el-option label="激光" value="激光"></el-option>
              <el-option label="传送带" value="传送带"></el-option>
              <el-option label="其他" value="其他"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="factory_no" label="厂区">
            <el-input type="text" v-model="deviceForm.factory_no" :validate-event="false"></el-input>
          </el-form-item>
          <el-form-item prop="workshop_no" label="厂房">
            <el-input type="text" v-model="deviceForm.workshop_no" :validate-event="false"></el-input>
          </el-form-item>
       </el-form>
      </div>
      <span class="pl-5 colorRed">提示：带*的为必填内容</span>
      <span slot="footer" class="dialog-footer">
       <el-button @click="isVisible = false">取 消</el-button>
       <el-button type="primary" @click="onSubmit('deviceForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {addDevice,updateDeviceInfo} from '@/api/device.js'
import {getStationList} from '@/api/device.js'
export default {
  name: 'DeviceDialog', 
  data() {
    return {
      //控制设备对话框显示
       isVisible:this.isShow,
       inputShow:false,
       productList:[],//产品列表
       stationList:[],//工位列表
        //设备表单
       deviceForm: {
        machine_no: "",
        name: "",
        station_id:"",
        machine_kind:"",
        factory_no:"",
        workshop_no:"",
      },
      //表单校验
      deviceForm_rules: {
        machine_no: [
          {
            required: true,
            message: "请填写设备号",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请填写设备名称",
            trigger: "blur",
          },
        ],
       station_id: [
          {
            required: true,
            message: "请选择工位",
            trigger: "change",
          },
        ],
        machine_kind: [
          {
            required: true,
            message: "请填写设备类型",
            trigger: "blur",
          },
        ],
        factory_no: [
          {
            required: true,
            message: "请填写厂区",
            trigger: "blur",
          },
        ],
        workshop_no: [
          {
            required: true,
            message: "请填写厂房",
            trigger: "blur",
          },
        ],
      },
    }
  },
  props:{  
    isShow: Boolean,
    dialogRow: Object, 
    title:String
  },
  created() {
    this.getSelectData()
  },
  mounted() {
     if (this.title === "添加设备") {
       this.$nextTick(() => {
        this.$refs["deviceForm"].resetFields();
      });   
    } else {
        this.deviceForm = this.dialogRow;
        this.inputShow = true;     
     
    }
  },
  methods: {
    async getSelectData(){
      //获取工位列表数据
     const {data}=await getStationList(0)
     this.stationList=data
    },
     //表单提交
    onSubmit(deviceForm) {
      this.$refs[deviceForm].validate(async valid => {
        if (valid) {
            // add
          if (this.title === "添加设备") {         
              await addDevice(this.deviceForm)
              this.$message.success('添加设备成功!')          
          } else {
            //edit
              await updateDeviceInfo(this.deviceForm)
              this.$message.success('修改设备成功!')
           }
            this.$refs["deviceForm"].resetFields(); //清空表单
            this.isVisible = false; //关闭对话框
            this.$emit("getDeviceList"); //刷新列表
         }
      });
  },
   //关闭表单
    closeDialog() {
      this.$emit("closeDialog");
    },
}
}
</script>

<style lang = "scss" scoped>

</style>
